<template>
  <div>
    <h1>app</h1>
    <h2>{{ count }}</h2>
    <input type="text" v-model.number="num" />
    <!-- 给mutations中传参的第一种方法 -->
    <button @click="addAct(num)">点击该按钮做加法</button>
    <!--给mutations中传参的第二种方法 传入对象   -->
    <button @click="addObj(num)">测试传入对象的格式</button><br />

    <button @click="decrementAct">点击该按钮减法</button><br />
    <button @click="decrementObjAct">点击该按钮减法</button>

    <button @click="addNumAct(num)">点击该按钮做加法</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 1,
    };
  },
  mounted() {
    console.log(this.$store);
  },
  computed: {
    /* count() {
      return this.$store.state.count;
    }, */
    ...mapState(["count"]),
  },
  methods: {
    addAct(num) {
      // this.$store.dispatch("addAct");
      this.$store.commit("add", num);
    },
    addObj(num) {
      this.$store.commit({
        type: "addObj", //对应的mutations当中函数的名字
        num,
      });
    },
    decrementAct() {
      this.$store.dispatch("decrementAct", 5);
    },
    decrementObjAct() {
      this.$store.dispatch({
        type: "decrementObjAct",
        num: 5,
      });
    },
    addNumAct(num) {
      this.$store.dispatch("addNumAct", num);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>